jsPlumb.ready(function () {

    var instance = window.jsp = jsPlumb.getInstance({
        // default drag options
        DragOptions: {cursor: 'move', zIndex: 2000},
        // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
        // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
        ConnectionOverlays: [
            ["Arrow", {
                location: 1,
                visible: true,
                width: 11,
                length: 11,
                id: "ARROW",
                events: {
                    click: function () {
                        alert("you clicked on the arrow overlay")
                    }
                }
            }]
        ],
        // ConnectionsDetachable: true,
        Container: "work_panel"
    });

    /*var basicType = {
        connector: "StateMachine",
        paintStyle: {stroke: "red", strokeWidth: 4},
        hoverPaintStyle: {stroke: "blue"},
        overlays: [
            "Arrow"
        ]
    };

    instance.registerConnectionType("basic", basicType);*/

    // this is the paint style for the connecting lines..
    var connectorPaintStyle = {
            strokeWidth: 1,
            stroke: "#888"/*,
					joinstyle: "round",
					outlineStroke: "white",
					outlineWidth: 2*/
        },
        // .. and this is the hover style.
        connectorHoverStyle = {
            strokeWidth: 4,
            stroke: "#999"
        },
        endpointHoverStyle = {
            fill: "#999"/*,
					stroke: "#216477"*/
        },
        // the definition of source endpoints (the small blue ones)
        sourceEndpoint = {
            endpoint: "Dot",
            paintStyle: {
                stroke: "#888",
                fill: "#fff",
                radius: 5,
                strokeWidth: 1
            },
            isSource: true,
            //connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
            cssClass: "source-point",
            connector: ["Bezier", {Bezier: 20}],
            connectorStyle: connectorPaintStyle,
            hoverPaintStyle: endpointHoverStyle,
            hoverClass: 'source-point-hover-class',
            connectorHoverClass: 'connector-hover-class',
            connectorHoverStyle: connectorHoverStyle,
            dragOptions: {},
            maxConnections: -1,
            overlays: [
                ["Label", {
                    location: [0.5, 1.5],
                    label: "Drag",
                    cssClass: "endpointSourceLabel",
                    visible: false
                }]
            ]
        },
        // the definition of target endpoints (will appear when the user drags a connection)
        targetEndpoint = {
            endpoint: "Dot",
            paintStyle: {
                stroke: "#888",
                fill: "#fff",
                radius: 5,
                strokeWidth: 1
            },
            /*hoverPaintStyle: endpointHoverStyle,*/
            maxConnections: 1,
            // hoverClass: 'target-point-hover-class',
            cssClass: "target-point",
            dropOptions: {hoverClass: "in-hover", activeClass: "in-hover"},
            isTarget: true,
            overlays: [
                ["Label", {location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible: false}]
            ],
            events: {
                connected: function () {
                    this.setStyle({'display': 'none'});
                    this.setEnabled(false);
                }
            },
            onMaxConnections: function (info) {
                //alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
            }
        };

    var addNode = window.addJsplumbNode = function (nodeId, nodeLable, position) {

        var template = $('#node_template').html();
        template = template.replace(/\$\{nodeId\}/g, nodeId).replace(/\$\{icon\}/g, 'ico-click');
        template = template.replace(/\$\{text\}/g, nodeLable);
        template = template.replace(/\$\{name\}/g, nodeLable);

        var nd = $(template);
        nd.addClass('draggable');
        nd.css({left: position.x, top: position.y});
        $(instance.getContainer()).append(nd);

        addMenu(2, '#' + nodeId);

        instance.fire('jsPlumbDemoNodeAdded',nd[0]);

        return $('#' + nodeId)[0];
    }

    var addPorts = window.addJsplumbPort = function (node, ports, type) {
        //Assume horizental layout
        var number_of_ports = ports.length;
        var i = 0;
        var x_offset = 1 / (number_of_ports + 1);
        var x = 0;

        for (; i < number_of_ports; i++) {
            var anchor = [0, 0, 0, 0];
            var paintStyle = {radius: 5, fill: '#fff', stroke: '#999'};
            var isSource = false, isTarget = false;
            if (type === 'output') {
                anchor[1] = 1;
                isSource = true;
            } else {
                isTarget = true;
            }

            anchor[0] = x + x_offset;
            x = anchor[0];

            var p = instance.addEndpoint(node, isSource ? sourceEndpoint : targetEndpoint, {
                anchor: anchor, uuid: node.getAttribute("id") + "-" + ports[i]
            });


           /* p.bind('mouseover', function (obj, e) {
                $(p.canvas).poshytip('show');
            });

            p.bind('mouseout', function (obj, e) {
                $(p.canvas).poshytip('hide');
            })*/
        }
    }

    // suspend drawing and initialise.
    instance.batch(function () {

        var node1 = addNode('node1', '存储过程', {x: '80px', y: '20px'});
        var node2 = addNode('node2', 'SQL脚本', {x: '180px', y: '180px'});

        addPorts(node1, ['out1', 'out2'], 'output');
        addPorts(node2, ['in', 'in1', 'in2'], 'input');

        var conn = instance.connect({uuids: ["node1-out2", "node2-in1"], editable: true});

        // listen for new connections; initialise them the same way we initialise the connections at startup.
        instance.bind("connection", function (connInfo, originalEvent) {
            // console.log(connInfo.connection.getConnector().canvas)
            connInfo.targetEndpoint.fire('connected');
            var uid = jsPlumbUtil.uuid();
            $(connInfo.connection.getConnector().canvas).find('path:first').attr('id', uid);
            addMenu(3, '#' + uid);

        });


        // make all the window divs draggable
        // instance.draggable(jsPlumb.getSelector(".pane-node-content"));
        // THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector
        // method, or document.querySelectorAll:
        //jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });

        // connect a few up
        // instance.connect({uuids: ["Window2BottomCenter", "Window3TopCenter"], editable: true});
        //

        //
        // listen for clicks on connections, and offer to delete connections on click.
        //
        // instance.bind("click", function (conn, originalEvent) {
        // if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
        //   instance.detach(conn);
        //     conn.toggleType("basic");
        // });

        instance.bind("connectionDrag", function (connection) {
            $('.target-point').not('.jtk-endpoint-connected').find('circle').attr({
                'stroke-width': 12,
                'stroke': '#008000',
                'stroke-opacity': '0.5',
                'paint-order': 'stroke fill'
            })
        });

        instance.bind("connectionDragStop", function (connection) {
            $('.target-point').not('.jtk-endpoint-connected').find('circle').attr({
                'stroke-width': 1,
                'stroke': '#888',
                'stroke-opacity': '1'
            })
        });

        /* instance.bind("connectionMoved", function (params) {
             console.log("connection " + params.connection.id + " was moved");
         });*/
    });

    jsPlumb.bind("jsPlumbDemoLoaded", function (instance) {

        window.$jsPlumbCanvas = $('.jtk-surface-canvas');
        var inter = setInterval(function () {
            if (window.$jsPlumbCanvas.length != 0) {
                clearInterval(inter);
            } else {
                window.$jsPlumbCanvas = $('.jtk-surface-canvas');
                window.$jsPlumbCanvas.append('<div id="guide-h" class="guide"></div>');
                window.$jsPlumbCanvas.append('<div id="guide-v" class="guide"></div>');
                addMenu(1, '.work_panel');
            }
        }, 100);

        var renderer = window.renderer = jsPlumbToolkit.Support.ingest({
            jsPlumb: instance,
            renderParams: {enableWheelZoom: false, miniview: {container: $('.miniview')[0]}, zoomToFitIfNecessary: true}
        });


        // bind to the node added event and tell the renderer to ingest each one

        instance.bind("jsPlumbDemoNodeAdded", function (el) {
            renderer.ingest(el);
        });

        //适应画布
        renderer.zoomToFit({doNotZoomIfVisible: true});


        // pan mode/select mode
        jsPlumb.on(".controls", "tap", "[mode]", function () {
            var mode = this.getAttribute("mode");
            if (mode == 'up') {
                renderer.setZoom(renderer.getZoom() + 0.08);
            } else {
                renderer.setZoom(renderer.getZoom() - 0.08);
            }
        });

        // on home button tap, zoom content to fit.
        jsPlumb.on(".controls", "tap", "[reset]", function () {
            // renderer.getToolkit().clearSelection();
            renderer.zoomToFit({doNotZoomIfVisible: true});
        });

        jsPlumb.on(".controls", "tap", "[realsize]", function () {
            renderer.setZoom(1);
            // renderer.getToolkit().clearSelection();
        });

        //
        // use event delegation to attach event handlers to
        // remove buttons. This callback finds the related Node and
        // then tells the toolkit to delete it.
        //
        /*jsPlumb.on(canvasElement, "tap", ".delete", function (e) {
            var info = toolkit.getObjectInfo(this);
            renderer.getToolkit().removeNode(info.obj);
        });*/

    });

    jsPlumb.fire("jsPlumbDemoLoaded", instance);

});

